<template>
	<view>
		<l-upload ref="imgUpload" uploadType="img" :serverUrl="BASE_URL + '/wflow/res'" :formData="{isImg: 'true'}"
			:width="110" :height="110" :images="_value || []" :max-size="props.formProps.maxSize" :disableAdd="readonly"
			:limit="props.formProps.maxNumber" @complete="complete" @remove="remove" :disable="readonly">
		</l-upload>
		<view v-if="!readonly" style="color: #999999; font-size: 26rpx;">{{ $t(props.formProps.placeholder) || $t('webAuto.imageUpload') }}
			{{ sizeTip }}</view>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { BASE_URL } from '@/api/request.js'
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

	const imageStyles = {
		width: 80,
		height: 80,
		padding: '19rpx'
	}

	const props = defineProps({
		formProps: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: Array,
		readonly: Boolean
	})

	const _value = computed({
		get() {
			return props.modelValue
		},
		set(val) {
			emits('update:modelValue', val)
		}
	})

	const sizeTip = computed(() => {
		return props.formProps.maxSize > 0 ? `| ${t('webAuto.ImageSize')}${props.formProps.maxSize}MB` : ''
	})

	const emits = defineEmits(['update:modelValue'])

	const imgUpload = ref()

	function complete(e) {
		_value.value = e.imageArr
		if ((_value.value || []).length < e.imageArr.length) {
			uni.showToast({
				icon: 'none',
				title: t('webAuto.UploadSuccessful')
			})
		} else {
			uni.showToast({
				icon: 'none',
				title: t('webAuto.DeleteSuccessfully')
			})
		}
	}

	function remove(i) {
		if (!props.readonly) {
			_value.value.splice(i, 1)
		}
	}
</script>

<style>

</style>